<!--
 * @Autor: dingxiaolin
 * @Date: 2021-01-06 16:59:54
 * @LastEditors: dingxiaolin
 * @LastEditTime: 2021-01-29 11:23:14
-->
<template>
    <div class="breadPanel">
        <div class="redline"></div>
        <el-breadcrumb separator=">">
            <el-breadcrumb-item v-if="item.meta.title" v-for="(item, index) in $route.matched" :key="item.path">
                <span>{{ item.meta.title }}</span>
            </el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Watch } from 'vue-property-decorator';
import Bus from '@/common/util/bus';

@Component({
    components: {},
})
export default class NavBar extends Vue {
    public sysName: string = '';
    public collapsed: boolean = false;
    public sysUserName: string = '';
    public anchorId: string = '';
    public showButton: boolean = false;

    created() {}
    @Watch('$route')
    routeChange() {}
    //折叠导航栏
    public collapse = function () {
        this.collapsed = !this.collapsed;
        Bus.$emit('collapsed', this.collapsed);
    };
}
</script>

<style lang="scss" scoped>
.breadPanel {
    display: flex;
    padding: 10px 24px;
    background: #fff;
}
/deep/ .el-breadcrumb__item:last-child .el-breadcrumb__inner span {
    color: #1f2942 !important;
}

/deep/ .el-breadcrumb__inner {
    font-size: 16px;
    color: #000;
}
/deep/ .el-breadcrumb__separator {
    font-size: 16px;
    color: #000;
}
.redline {
    height: 100%;
    width: 3px;
    background: $red;
    margin-right: 10px;
}
.iconzhedie {
    cursor: pointer;
}
.el-icon-s-fold {
    font-size: 16px;
    line-height: 60px;
    cursor: pointer;
}
.breadcrumb_span {
    // color:#B0C2D9;
    padding: 5px 0;
    display: inline-block;

    padding: 0px 6px;
    height: 14px;
    line-height: 14px;
    font-size: 16px;
    margin-top: 10px;
}
</style>
